<template>

  <el-dialog
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    title="公告详情"
    width="50%"
    @close="handleClose">
    <h3>{{ detail.title }}</h3>
    <small>发布时间：{{ detail.createTime }}</small>
    <el-divider />
    <div class="notice" v-html="$options.filters.formatRichText(detail.content)" />

  </el-dialog>
</template>

<script>

import { fetchDetail } from '@/api/sys/notice/notice'

export default {
  name: 'NoticeViewDialog',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    id: String
  },
  data() {
    return {
      dialogVisible: false,
      detail: {}
    }
  },

  watch: {

    visible: {
      handler() {
        this.dialogVisible = this.visible
        this.fetchDetail()
      }
    },
    id: {
      handler() {
        this.fetchDetail()
      }
    }
  },

  created() {
    this.dialogVisible = this.visible
    this.fetchDetail()
  },

  methods: {

    // 提交审核
    fetchDetail() {
      if (!this.id) {
        return
      }
      fetchDetail(this.id).then(res => {
        this.detail = res.data
      })
    },

    handleClose() {
      this.postForm = {}
      this.$emit('update:visible', false)
    }
  }
}
</script>

<style scoped>

::v-deep .notice img{
  max-width: 100%;
  border: #eee 1px solid;
  margin: 10px 0;
}

::v-deep .notice div{
  line-height: 28px;
  font-size: 14px;
  color: #333;
}
</style>

